<template>
	<view>
		<view class="header-comp">
			<view class="header">
				<view class="header-bar">
					<view class="fill-height el-flex">
						<view class="header-btn2" @click="Back()">
							<image src="../../static/images/icon-back2-black.png" mode=""></image>
						</view>
						<view class="placeholder text-ellipsis">
							上新日历
						</view>
						<view class="app-header-right"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="touchBox content history">
			<view class="list-wrap" v-for="(item,index) in new_list" :key="index" @click="clickSwiper(item)">
				<view class="date">{{item.month}}/{{item.day}}</view>
				<view class="list-item">
					<lazyLoad :src="item.img" height='1.8rem' width='1.8rem'></lazyLoad>
					<view class="item-right">
						<view class="fz32 ellip">
							{{item.product_name}}
						</view>
						<view class="product-tip ellip">
							{{item.popnew_title}}
						</view>
						<view class="product-label" v-if="item.custom_tag.length!=0">
							<text class="label">{{item.custom_tag[0]}}</text>
						</view>
						<view class="other-info">
							<view class="product-price">
								<text class="n">￥</text>
								<text class="num">{{item.price}}</text>
							</view>
							<view class="btm-button">
								去查看
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import lazyLoad from '../../components/LazyLoad/LazyLoad.vue'
	import toTop from '../../components/getTop/getTop.vue'
	export default {
		components: {
			toTop,
			lazyLoad
		},
		data() {
			return {
				new_list: [],
				page_index: 1,
				loadAll: false
			};
		},
		onReachBottom() {
			if (this.loadAll) return;
			this.page_index++
			this.getProductChannelList(true)
		},
		methods: {
			Back() {
				uni.navigateBack(-1)
			},
			clickSwiper(item) {
				if (item.product_id) {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${item.product_id}`
					})
				}
			},
			getProductChannelList(flag) {
				this.$request.get('/getProductChannelList', {
					'page_index': this.page_index,
					'page_size': 10
				}).then((res) => {
					let list = res.data.data.new_list
					if (list.length == 0) {
						this.loadAll = true
					}
					list.forEach(item => {
						let date = new Date(item.start_time * 1000);
						let M = (date.getMonth() + 1 < 10 ? (date.getMonth() + 1) : date.getMonth() +
							1);
						let D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
						item.month = M
						item.day = D
					})
					if (flag) {
						this.new_list = this.new_list.concat(list)
					} else {
						this.new_list = list
					}
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		onLoad() {
			this.getProductChannelList()
		}
	}
</script>

<style lang="scss" scoped>
	.header-bar {
		height: 100%;
	}

	view {
		line-height: 1.15;
	}

	.header {
		height: 0.88rem;
		background: #f6f6f6;

		.fill-height {
			height: 100%;

			.header-btn2 {
				display: block;
				width: 0.7rem;
				margin: 0 0.2rem;

				image {
					height: 0.7rem;
					width: 0.7rem;
				}
			}

			.app-header-right {
				min-width: 1rem;
			}

			.placeholder {
				flex: 1;
				text-align: center;
				font-size: .32rem;
				font-weight: 600;
				white-space: nowrap;
			}
		}
	}

	.content {
		height: auto;
		background: #f6f6f6;
		padding: 0.1rem 0 0.24rem;
		padding-top: 0.88rem;


		.list-wrap {
			margin: 0.2rem 0 0.4rem;

			.date {
				font-size: .34rem;
				color: #000;
				margin-bottom: 0.18rem;
				text-align: left;
				margin-left: 0.3rem;
				font-weight: 700;
			}

			.list-item {
				margin: 0 0.2rem 0.2rem;
				background: #fff;
				border-radius: 0.08rem;
				padding: 0.24rem;
				display: flex;
				position: relative;

				/deep/.muqian-content {
					margin-right: 0.18rem;
				}

				image {
					height: 1.8rem;
					width: 1.8rem;
					margin-right: 0.18rem;
				}

				.item-right {
					flex: 1;
					text-align: left;

					.fz32 {
						font-size: .32rem;
						font-weight: 600;
						white-space: nowrap;
					}

					.product-tip {
						margin: 0.18rem 0;
						font-size: .24rem;
						color: #888;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
					}

					.ellip {
						width: 4.2rem;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.product-label {
						margin-bottom: 0.31rem;

						.label {
							font-size: .2rem;
							color: #333;
							border: 0.01rem solid #333;
							padding: 0.02rem 0.04rem;
							margin-right: 0.16rem;
							border-radius: 0.04rem;
						}
					}

					.other-info {
						display: flex;

						.product-price {
							flex: 1;

							.n {
								font-size: .24rem;
								color: #ff5934;
								margin-right: -0.02rem;
							}

							.num {
								font-size: .36rem;
								color: #ff5934;
							}
						}

						.btm-button {
							border-radius: 0.29rem;
							border: 0.01rem solid #ff5934;
							font-size: .24rem;
							color: #ff5934;
							padding: 0.1rem 0.25rem;
						}
					}
				}
			}
		}
	}
</style>